<script setup lang="ts">
import { ERelationType } from '@/common/enums';
import { IBanner } from '@/types';
import { ref } from 'vue';

// typescript
const banners = ref<IBanner[]>([
  { imageUrl: "../../static/images/delete/banner/2.png", relationType: ERelationType.COMMODITY },
  { imageUrl: "../../static/images/delete/banner/1.png", relationType: ERelationType.COMMODITY },
  { imageUrl: "../../static/images/delete/banner/3.png", relationType: ERelationType.COMMODITY },
  { imageUrl: "../../static/images/delete/banner/4.png", relationType: ERelationType.COMMODITY }
]);
</script>

<!-- 带banner的商品列表 -->
<template>
  <view class="w-components-container w-commodity-banner-list">
    <div class="banner-view">
      <w-banner :banners="banners"></w-banner>
    </div>
    <div class="commodity-view">
      <w-commodity-list small></w-commodity-list>
    </div>
  </view>
</template>

<style scoped lang="scss">
// scss
.w-commodity-banner-list {
  display: flex;
}

.banner-view {
  width: 300rpx;
  height: 480rpx;
}

.commodity-view {
  flex: 1;
}
</style>